import React, { Component } from 'react'
import './addrole.scss'
import { Divider, Form, Input, Button, Checkbox, message } from 'antd'
import menuList from '../../../config/menuConfig'

import api from '../../../api'
const CheckboxGroup = Checkbox.Group;


export default class AddRole extends Component {
    state = {
        formItemLayout: {
            labelCol: {
                xs: {
                    span: 24,
                },
                sm: {
                    span: 2,
                },
            },
            wrapperCol: {
                xs: {
                    span: 24,
                },
                sm: {
                    span: 22,
                },
            },
        },
        buttonLayout:{
            wrapperCol: {
                xs: {
                  span: 24,
                  offset: 0,
                },
                sm: {
                  span: 16,
                  offset: 2,
                },
              },
        }
    }
    // //发送服务器请求
    postData = async (values) => {
        console.log(values);
        let time = new Date().toLocaleString();
        values.time = time
        values = {...values,author:JSON.stringify(values.author)}
        let res = await api.role.addrole(values)
        console.log(res);
        if(res.data.status === 0){//与后端代码有关res.send()
            message.success("添加成功");
        } else {
            message.error(res.data.msg);
        }
    }


    render() {
        const { formItemLayout ,buttonLayout} = this.state
        return (
            <div id="add-role">
                <Divider />
                <header>增加角色</header>
                <Divider />
                <Form  {...formItemLayout} onFinish={this.postData}>
                    <Form.Item
                        label="角色名称"
                        name="rolename"
                        rules={[
                            { required: true, whitespace: true, message: '角色名不能为空' }
                        ]}
                    >
                        <Input className="user-in" size='large' ref={this.contentRef} />
                    </Form.Item>
                    <Form.Item
                        label="权限"
                        name="author"
                    >
                        <CheckboxGroup>
                            {
                                menuList.map((item,index)=>{
                                    if(index>0){
                                        return <Checkbox value={item.title} key={item.key}>{item.title}</Checkbox>
                                    }
                                })
                            }
                        </CheckboxGroup>

                    </Form.Item>
                    <Form.Item {...buttonLayout}>
                        <Button type="primary" htmlType="submit" >立即创建</Button>
                    </Form.Item>
                </Form>
            </div>
        )
    }
}
